.app {
  --primary-contrast: #fbfbfb;
  --secondary-contrast: #d0c8ca;
  --full-contrast: #fff;
  --electric-violet: color-mix(
    in srgb,
    oklch(53.18% 0.28 296.97),
    var(--full-contrast) 70%
  );
  --vivid-pink: color-mix(
    in srgb,
    oklch(69.02% 0.277 332.77),
    var(--full-contrast) 70%
  );
  --header-height: 0;
  --line-color: #4b373f;
  --mine-color-rgb: 36 174 166;
  height: 100%;
  /*  header {
    position: absolute;
    background-color: aqua;
    height: var(--header-height);
    line-height: var(--header-height);
    inset-inline: 0;
  } */
  main {
    position: relative;
    padding-top: var(--header-height);
    // height: calc(100% - var(--header-height));
    height: 100%;
    .logo {
      position: absolute;
      left: 24px;
      top: 20px;
      font-size: 36px;
      background-image: linear-gradient(
        90deg,
        var(--electric-violet) 0%,
        var(--vivid-pink) 35%,
        #874776 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      background-size: 200%;
      animation: gradientBG 5s ease infinite;
    }

    .nav-btn {
      position: absolute;
      font-size: 1rem;
      display: block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #bebaba;
      background-color: #f0f1f2;
      cursor: pointer;
      transition: all 0.2s ease-in;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }
    .nav-btn.hide {
      opacity: 0;
    }
    .nav-btn:hover {
      border-color: #413e46;
      background-color: #413e46;
      color: aliceblue;
    }
    .nav-btn.prev {
      // top: calc(8px + var(--header-height));
      top: 8px;
    }
    .nav-btn.next {
      bottom: 8px;
    }

    .stairs {
      display: flex;
      flex-direction: column;
      width: 168px;
      white-space: nowrap;
      position: absolute;
      right: 16px;
      top: 32px;
      height: fit-content;
      max-height: 100vh;
      overflow-y: auto;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: -0.01rem;
      .ladder {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 6px;
        -webkit-background-clip: text;
        color: transparent;
        transition: background-color 0.3s ease;
        padding: 0.3rem 1rem;
        background-color: #a39fa9;
        border-inline-start: 1px solid #413e46;
        cursor: pointer;
        .ld-arrow {
          opacity: 0;
          transform: translateX(100%);
          width: 0;
          height: 20px;
          color: var(--vivid-pink);
          transition: all 0.6s cubic-bezier(0.355, 0.165, 0.525, 1.6);
          margin-bottom: 3px;
        }
      }
      .ladder:hover {
        background-color: #fbfbfb;
      }
      .ladder.active {
        background-image: linear-gradient(
          0deg,
          var(--electric-violet) 0%,
          var(--vivid-pink) 100%
        );
        border-color: var(--vivid-pink);
        .ld-arrow {
          opacity: 1;
          transform: translateX(0);
          width: 20px;
        }
      }
    }

    .mine {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: rgb(var(--mine-color-rgb));

      a {
        color: inherit;
        animation: just1 2s ease-in-out infinite alternate;
        &:hover {
          // animation: none;
          color: inherit !important;
        }
        svg {
          display: block;
          padding-block: 8px;
          cursor: pointer;
        }
      }
    }

    @keyframes gradientBG {
      0% {
        background-position: 0;
      }
      50% {
        background-position: 100%;
      }
      100% {
        background-position: 0;
      }
    }

    @keyframes just1 {
      0% {
        color: rgb(var(--mine-color-rgb) / 40%);
      }
      100% {
        color: rgb(var(--mine-color-rgb) / 80%);
      }
    }
    @keyframes just2 {
      0% {
        color: rgba(0, 255, 0, 0);
        box-shadow: 0 0 0 rgba(0, 255, 0, 0), 0 0 0 rgba(0, 255, 0, 0) inset;
      }
      100% {
        color: rgba(0, 255, 0, 1);
        box-shadow: 0 0 70px rgba(0, 255, 0, 0.7),
          0 0 15px rgba(0, 255, 0, 0.5) inset;
      }
    }
    @keyframes just3 {
      0% {
        color: rgba(0, 0, 255, 0);
        box-shadow: 0 0 0 rgba(0, 0, 255, 0), 0 0 0 rgba(0, 0, 255, 0) inset;
      }
      100% {
        color: rgba(0, 0, 255, 1);
        box-shadow: 0 0 70px rgba(0, 0, 255, 0.7),
          0 0 15px rgba(0, 0, 255, 0.5) inset;
      }
    }

    .org-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 1198px;
      // border: 1px solid red;
      margin: 0 auto;
      height: calc(100% - 60px);
      overflow-y: auto;
      padding-top: 60px;
      &::-webkit-scrollbar {
        width: 0;
        height: 6px;
      }

      .org-sec {
        position: relative;
        /* background: linear-gradient(var(--line-color), var(--line-color)) center
          bottom / 1px 100% no-repeat; */
        &:not(:first-child) {
          padding-top: 32px;
        }
        &::after {
          display: block;
          position: absolute;
          z-index: -1;
          width: 1px;
          inset-block: 0;
          background-color: var(--line-color);
          left: 50%;
          margin-left: -0.5px;
          content: " ";
        }
        .persons-wrap {
          position: relative;
          display: grid;
          grid-template-columns: repeat(var(--column-count, 3), 1fr);
          grid-auto-rows: max-content;
          gap: 28px;
          justify-content: center;
          height: var(--person-wrap-height, auto);
          app-person-card.sticky {
            position: sticky;
            top: 0;
            z-index: 1;
          }
          app-person-card.active {
            transform: scale(1.06);
            .person-card {
              background-color: #252022;
              --colorA: #874776;
              &::before,
              &::after {
                content: "";
                position: absolute;
                inset: 0;
                border: 1px solid #87477692;
                pointer-events: none;
                filter: drop-shadow(0 0 4px var(--colorA))
                  drop-shadow(0 0 8px var(--colorA))
                  drop-shadow(0 0 6px var(--colorA))
                  drop-shadow(0 0 8px var(--colorA));
              }
            }
          }
          app-person-card.hide {
            display: none;
            opacity: 0;
            transform: scale(0);
          }
          /* app-person-card:not(.more) .person-card {
            animation: showCard 0.8s ease-in;
          } */
        }
        .persons-wrap.leader {
          grid-template-columns: auto;
          padding-bottom: 16px;
        }
        .persons-wrap.subordinates {
          padding: 32px 16px 0;
          // background-color: oklch(16.93% 0.004 285.95);
          &::before {
            display: block;
            border-bottom: none;
            height: 16px;
            position: absolute;
            inset-inline: 0;
            content: "";
            border-top: 1px solid var(--line-color);
            border-right: 1px solid var(--line-color);
            border-left: 1px solid var(--line-color);
          }
        }
        .persons-wrap.subordinates.has-children {
          background-color: transparent;
        }
      }
    }
  }
}

.card-container {
  width: 194px;
  text-align: center;
  cursor: pointer;
  color: var(--primary-contrast);
  padding-block: 1.5rem 1rem;
  border: 1px solid #413e46;
  border-radius: 0.25rem;
  border-top-width: 3px;
  border-top-color: #8514f5;
  background-color: oklch(16.93% 0.004 285.95);
  transition: all 0.3s ease-in;
  &:hover {
    transform: scale(1.06);
    background-color: #252022;
  }
}

.card-container.open-close {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

@keyframes showCard {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  80% {
    opacity: 0.8;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
